<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style type="text/css">

        /*
            display:通过display样式可以修改元素的类型
                可选值：inline  可以将一个元素作为内联元素显示
                        block  可以将一个元素作为块元素显示
                        inline-block  将一个元素转换为行内块元素,它可以使一个元素即有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
                        img标签就是行内块元素标签
                        none：不显示元素，并且元素在页面中不会占有位置

        */
        a{
            display: block;
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }
        .box1 {
            display: inline;
            background-color: red;
        }
        .x2 {
            display: none;
        }
        #x1 {
            /*
                display:none   使用该方式隐藏的元素，不会再页面中显示，并且不会再占据页面的位置
                visibility:  可以用来设置元素的显示和隐藏状态
                    visible: 默认值，元素会在页面中显示
                    hidden:  元素会吟隐藏不显示
                    使用visibility：hidden;隐藏的元素虽然不会再页面中显示，但是它在页面中依然占据着位置



            */
            visibility: hidden;
        }
    </style>
</head>
<body>
    <a href="#">我是一个a标签，我的愿望是将我变成块元素</a>
    <div class="box1">我是一个div，我的愿望是将我变成一个内联元素</div>
    <a href="#" class="x2">我之所以不显示是因为我的display属性值为none</a>

    <a href="#" id="x1">测试visibility属性</a>
    <span>你就看我上不上去就知道visibility：hidden的作用了</span>

</body>
</html>